<template>
	<cl-dialog
		title="配置接新老师"
		width="400px"
		:visible.sync="visible"
		@close="close"
		:props="{
			beforeClose: beforeClose,
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<div class="teacher-wrap">
			<el-alert title="开启即计算可接新客老师" show-icon type="info" :closable="false" />
			<template v-if="teacherList.length > 0">
				<div class="list-cell" v-for="( item, index ) in teacherList" :key="index">
					<div class="list-cell_left">
						<cl-avatar
							:src="item.user_photo || `https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/upload/2021-08-14/wOfklveODu.png`"
						/>
						<div class="list-cell_info">
							<div class="font-14" style="margin-bottom: 4px">{{ item.user_name }}</div>
							<div class="font-12 color-gray">{{ item.teacher_post | constFilter("TEACHER_POST_LIST") }}</div>
						</div>
					</div>
					<div class="list-cell_right">
						<el-switch
							v-model="item.meet_new"
							:inactive-value="0"
							:active-value="1"
							@change="setMeetNew($event, item)"
						/>
					</div>
				</div>
			</template>
			<cl-empty tips="暂无技师列表" v-else />
		</div>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			saving: false,
			search: {
				biz_id: "",
				dept_id: "",
				is_teacher: 1,
				status: 1
			},
			teacherList: []
		};
	},
	methods: {
		open(data = {}) {
			this.visible = true;
			// this.search = { ...data };
			this.search.biz_id = data.biz_id;
			this.search.dept_id = data.dept_id;
			// console.log(this.form);

			this.getList();
		},
		close() {
			this.visible = false;
		},
		beforeClose(done) {
			!this.saving && done();
			this.teacherList = [];
			this.$refs.search.resetFields();
		},
		async getList() {
			const { data } = await this.$service.user.list(this.search).done(() => {
				this.saving = false;
			});
			console.info("teacherList", data);
			this.teacherList = data;
		},
		async setMeetNew(e, item) {
			console.info("e", e, item);
			this.saving = true;
			const query = {
				user_id: item.user_id,
				meet_new: e
			};
			await this.$service.user.setmeetnew(query).done(() => {
				this.saving = false;
				this.$message.success("操作成功");
			});
		},
		submit() {
			this.saving = true;
			// await this.$service.shop.businessTeacher(this.form).done(() => {
			// 	this.saving = false;
			// });
			this.$emit("confirm");
			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.teacher-wrap {
	width: 100%;
	max-height: 500px;
	.el-alert {
		padding: 6px 10px;
	}
	.list-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16px;
		&_left {
			display: flex;
			align-items: center;
		}
		&_info {
			margin-left: 10px;
		}
	}
}
</style>
